<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

  .outer {
    height: 100px;
    /*设置padding避免被头尾覆盖*/
    padding-left: 100px;
    padding-right: 200px;
  }

  .left {
    position: relative;
    /*  在设置了padding后，左右元素都被挤了进来，我们可以设置position:relative解决，因为浮动元素已经脱离了文档流，所以不能设置absolute。 通过设置left和right元素的相对位置，实现定位：*/
    left: -100px;

    float: left;
    /*设置margin-left为负值会让元素自身位置发生变化，由于浮动的关系，元素被往左拉了一个center元素的宽度(100%)故回到了开头*/
    margin-left: -100%;

    width: 100px;
    height: 100px;
    background: tomato;
  }

  .right {
    position: relative;
    /*  在设置了padding后，左右元素都被挤了进来，我们可以设置position:relative解决，因为浮动元素已经脱离了文档流，所以不能设置absolute。 通过设置left和right元素的相对位置，实现定位：*/
    left: 200px;

    float: right;
    /*right元素设置margin-left: -200px;拉回行尾*/
    margin-left: -200px;

    width: 200px;
    height: 100px;
    background: gold;
  }

  .center {
    float: left;

    width: 100%;
    height: 100px;
    background: lightgreen;
  }
</style>
<body>
<!--圣杯布局，利用浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，中间一列放在最前面，宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行，
通过设置 margin 负值将其移动到上一行，再利用相对定位，定位到两边-->
<a href="https://www.cnblogs.com/WuAnqi/p/15474196.html"></a>
<div class="outer">
<!--  中间得放最前面-->
  <div class="center"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>
</html>
